<script lang="ts" setup>
import type { AppQueryCriteria, AppTableView } from '@/api/app/types'
import FormDialog from './components/form-dialog.vue'
import * as app from '@/api/app'
import ReleaseVersionDialog from './components/release-version-dialog.vue'
import VersionDrawer from './components/version-drawer.vue'

const paginationRequest = reactive<PaginationRequest<AppQueryCriteria>>({
    pageIndex: 1,
    pageSize: 10,
    criteria: {
        keyword: ''
    },
    order: {
        property: 'id',
        direction: 'DESC'
    }
});

const { criteria } = toRefs(paginationRequest);

const paginationResponse = ref<PaginationResponse<AppTableView>>({
    total: 0,
    data: []
});

const query = async (pageIndex?: number) => {
    if(pageIndex) {
        paginationRequest.pageIndex = pageIndex;
    }

    paginationResponse.value = await app.query(paginationRequest)
};

onMounted(() => {
    query();
});

const formDialogRef = ref()

const openDialog = async (id?: string) => {
    if(id === undefined) {
        formDialogRef.value.open({
            title: '添加APP'
        })
    } else {
        formDialogRef.value.open({
            title: '编辑APP',
            id
        })

    }
}

const remove = async (id: string) => { 
    const result = await app.remove(id)
    if(result.success){
        ElMessage.success(result.message)
        query()
    } else {
        ElMessage.error(result.message)
    }
}

const releaseVersionDialogRef = ref()
const releaseApp = ref<AppTableView>()

const openReleaseVersionDialog = async (app: AppTableView) => {
    releaseApp.value = app

    releaseVersionDialogRef.value.open({
        title: '发布版本',
        id: app.id
    })
}

const versionDrawer = ref()
const openVersionDrawer = async (row: AppTableView) => {
    versionDrawer.value.open({
        title: `${row.name}-${row.platform} 版本清单`,
        id: row.id
    })
}
</script>

<template>
    <el-card shadow="never">
        <el-form :model="criteria" label-width="80px" inline style="text-align: left;">
            <el-form-item label="应用平台">
                <ApplicationSelect></ApplicationSelect>
            </el-form-item>
            <el-form-item prop="keyword" label="关键字">
                <el-input v-model="criteria!.keyword" placeholder="名称/编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query(1)">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card shadow="never">
        <div style="text-align: left; margin-bottom: 10px;">
            <el-button type="primary" @click="openDialog()">添加</el-button>
        </div>
        <el-table :data="paginationResponse.data">
            <el-table-column label="APP名称" prop="name" align="center"></el-table-column>
            <el-table-column label="APP编码" prop="code" align="center"></el-table-column>
            <el-table-column label="操作系统" prop="platform" align="center"></el-table-column>
            <el-table-column label="最新版本" prop="latestVersion" align="center">
                <template #default="{ row }">
                    <el-button type="primary" link @click="openVersionDrawer(row)">{{ row.latestVersion }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" :link="true" @click="openReleaseVersionDialog(scope.row)">发布版本</el-button>
                    <el-button type="primary" :link="true" @click="openDialog(scope.row.id)">修改</el-button>
                    <el-popconfirm title="确定要删除吗？" @confirm="remove(scope.row.id)">
                        <template #reference>
                            <el-button type="primary" link>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination :total="paginationResponse.total"
                :page-size="paginationRequest.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :current-page="paginationRequest.pageIndex"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="(size: number) => paginationRequest.pageSize = size"
                @current-change="(page: number) => query(page)">
            </el-pagination>
        </div>
    </el-card>

    <FormDialog ref="formDialogRef" @close="query()" />
    <ReleaseVersionDialog ref="releaseVersionDialogRef" :app="releaseApp" @close="query()" />
    <VersionDrawer ref="versionDrawer" @close="query()"></VersionDrawer>
</template>

<style lang="scss" scoped>
.pagination-container {
    display: flex;
    margin-top: 15px;

    .el-pagination {
        margin-left: auto;
    }
}
</style>